$(function () {
  /*控制移动端菜单按钮动画*/
  $(".navbar-toggler").click(function () {
    $(this).toggleClass("on")
  });

  let headerTop = $(".header-top").height() + $(".header-middle").height()
  let headerHeight = $(".header").height()
  console.log(headerHeight);
  $(window).scroll(function () {
    let offsetY = $("body").scrollTop() + $("html").scrollTop()
    if (offsetY > headerTop) {
      $(".header-top").removeClass("d-xl-block")
      $(".header-middle").hide()
      $(".header").addClass("position-fixed")
      // $(".header").css({
      //   top: 0,
      //   left: 0
      // })
      // $(".section1").css({
      //   marginTop: headerHeight
      // })
    }else {
      $(".header-top").addClass("d-xl-block")
      $(".header-middle").show()
      $(".header").removeClass("position-fixed")
      $(".section1").css({
        marginTop: 0
      })
    }
  })

  let mySwiper = new Swiper ('.swiper-container', {
    // 开启自动轮播
    // autoplay: true,//等同于以下设置
    autoplay: {
      delay: 3000,
      stopOnLastSlide: false,
      // 点击后是否停止自动轮播
      disableOnInteraction: false
    },
    // 开启分页器
    pagination: {
      // 装载分页器元素的盒子
      el: '.swiper-pagination',
      // 修改每个分页项的类名
      bulletClass : 'my-bullet',
      // 修改分页选中项的类名
      bulletActiveClass: 'my-bullet-active',
      clickable: true
    },
    on: {
      init() {
        swiperAnimateCache(this); //隐藏动画元素
        swiperAnimate(this); //初始化完成开始动画
      },
      // swiper从一个slide过渡到另一个slide结束时执行
      slideChangeTransitionEnd: function(){
        // 切换之后回来还能执行动画
        swiperAnimate(this);
        console.log(this.activeIndex);
        $(".swiper-name>span").eq(0).animate({
          top: -this.activeIndex * 45 + 'px'
        }, 1000)
        $(".swiper-num>span").eq(0).animate({
          top: -this.activeIndex * 45 + 'px'
        }, 1000)
      }
    }
  })


  // 1.创建一个控制器对象controller
  let controller = new ScrollMagic.Controller();
  // 2.创建一个场景对象scene
  let scene = new ScrollMagic.Scene({
    duration: '110%',
    triggerElement: '.trigger-section1',
    triggerHook: "onLeave"
  });
  scene.setPin(".section1", {pushFollowers: false})
  scene.setTween(".section1", 1, {
    opacity: 0.5
  })
  // 3.将场景对象添加到控制器对象
  controller.addScene(scene);

  // 1.创建一个控制器对象controller
  let scene2 = new ScrollMagic.Scene({
    triggerElement:".trigger-section2",
    triggerHook: "onEnter",
  });
  scene2.setVelocity([".section2-top>div", ".section2-top>div>p"], {
    opacity: "1",
    top: "0px"
  },{
    duration: 3000
  });
  // 3.将场景对象添加到控制器对象中
  controller.addScene(scene2);

  let scene3 = new ScrollMagic.Scene({
    triggerElement:".trigger-section2",
    triggerHook: "onLeave",
    offset: $(".section2-top").height() + 100,
    duration: "100%"
  });
  scene3.setPin(".section2", {pushFollowers: false});
  let tm = new TimelineMax()
  tm.add([
    new TweenMax(".middle-left", 1, {
      transform: "translateX(-100%)",
      opacity: "0"
    }),
    new TweenMax(".middle-right", 1, {
      transform: "translateX(100%)",
      opacity: "0"
    }),
    new TweenMax(".middle-text", 1, {
      opacity: "1",
      delay: 0.4
    })
  ])
  tm.add(new TweenMax(".middle-phone", 1, {
    opacity: "1",
  }))
  scene3.setTween(tm)
  // 3.将场景对象添加到控制器对象中
  controller.addScene(scene3);
})
